@extends('layouts.home')
<style>
    :root {
        --harvest-green: #16a34a;
        --harvest-green-light: #22c55e;
        --harvest-green-dark: #16a34a;
        --success-light: #F0F8F0;
    }

    .btn-success {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: var(--harvest-green-dark);
        border-color: var(--harvest-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 142, 35, 0.3);
    }

    .btn-outline-success {
        color: var(--harvest-green);
        border-color: var(--harvest-green);
        transition: all 0.3s ease;
    }

    .btn-outline-success:hover {
        background-color: var(--harvest-green);
        border-color: var(--harvest-green);
        color: white;
    }

    .text-success {
        color: var(--harvest-green) !important;
    }

    .bg-success-subtle {
        background-color: var(--success-light) !important;
    }

    .shadow-sm {
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05) !important;
    }

    .rounded-3 {
        border-radius: 0.75rem !important;
    }

    .order-card {
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    .order-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-color: var(--harvest-green-light);
    }

    .order-item {
        transition: all 0.3s ease;
    }

    .order-item:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }

    .product-image-wrapper {
        overflow: hidden;
        border-radius: 0.5rem;
    }

    .order-status-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-weight: 500;
    }

    .status-processing {
        background-color: #f0c025;
        color: #856404;
    }

    .status-shipped {
        background-color: #91c2f3;
        color: #055160;
    }

    .status-accepted{
        background-color: #91c2f3;
        color: #055160;
    }
    .status-delivered {
        background-color: #16a34a;
        color: var(--harvest-green);
    }

    .status-pending {
        background-color: #f0c025;
        color: #6c757d;
    }

    .status-cancelled {
        background-color: #f81e30;
        color: #721c24;
    }

    .empty-state {
        padding: 3rem 1rem;
        text-align: center;
    }

    .empty-state-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background-color: #f8f9fa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #6c757d;
    }

    .filter-tabs {
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 2rem;
    }

    .filter-tab {
        padding: 0.75rem 1.5rem;
        color: #6c757d;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .filter-tab:hover {
        color: var(--harvest-green);
        text-decoration: none;
    }

    .filter-tab.active {
        color: var(--harvest-green);
        border-bottom-color: var(--harvest-green);
        font-weight: 600;
    }

    .order-summary-mini {
        background: linear-gradient(135deg, var(--harvest-green) 0%, var(--harvest-green-light) 100%);
        color: white;
        border-radius: 0.75rem;
        padding: 1rem;
    }

    .item-box {
        display: flex;
    }

    @media (max-width: 768px) {
        .container {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .order-card {
            margin-bottom: 1.5rem;
        }

        .filter-tabs {
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .filter-tab {
            display: inline-block;
            white-space: nowrap;
        }

        .item-box {
            display: grid !important;
        }
    }

    .collapse-toggle {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .collapse-toggle:hover {
        color: var(--harvest-green) !important;
    }

    .collapse-toggle .fas {
        transition: transform 0.3s ease;
    }

    .collapse-toggle[aria-expanded="true"] .fas {
        transform: rotate(180deg);
    }

    .order-actions {
        gap: 0.5rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .filter-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
        /* Firefox */
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .filter-tab {
        display: inline-block;
        padding: 8px 12px;
        text-decoration: none;
        color: #333;
        border-bottom: 2px solid transparent;
    }

    .filter-tab.active {
        border-color: #0d6efd;
        font-weight: bold;
    }
</style>

@section('content')
    <main class="min-vh-100 bg-light">
        <!-- Header Section -->
        <div class="bg-white shadow-sm border-bottom">
            <div class="container py-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h2 mb-2 text-dark fw-bold">My Orders</h1>
                        <p class="text-muted mb-0">Track and manage your orders</p>
                    </div>
                    <div class="d-none d-md-block">
                        <div class="order-summary-mini">
                            <div class="d-flex align-items-center gap-3">
                                <div class="text-center">
                                    <div class="h4 mb-0 fw-bold">{{ count($orders) }}</div>
                                    <div class="small opacity-75">Total Orders</div>
                                </div>
                                <div class="vr opacity-50"></div>
                                <div class="text-center">
                                    <div class="h4 mb-0 fw-bold">
                                        {{ number_format($orders->sum('total_amount'), 2) }}
                                        @if ($config->currancy)
                                            {{ $config->currancy }}
                                        @endif
                                    </div>
                                    <div class="small opacity-75">Total Spent</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container py-5">
            <!-- Filter Tabs -->
            <div class="filter-tabs">
                <a href="#" class="filter-tab active" data-filter="all">All Orders</a>
                <a href="#" class="filter-tab" data-filter="pending">Processing</a>
                <a href="#" class="filter-tab" data-filter="shipped">Shipped</a>
                <a href="#" class="filter-tab" data-filter="delivered">Delivered</a>
                <a href="#" class="filter-tab" data-filter="cancelled">Cancelled</a>
            </div>

            @if (count($orders) > 0)
                <div class="row g-4" id="orders-container">
                    @foreach ($orders as $order)
                        <div class="col-12 order-item-wrapper"
                            data-status="{{ strtolower($order->order_status ?? 'pending') }}">
                            <div class="order-card bg-white rounded-3 shadow-sm overflow-hidden">
                                <!-- Order Header -->
                                <div class="p-4 border-bottom bg-light">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center gap-3">
                                            <div>
                                                <h5 class="mb-1 fw-semibold text-dark">
                                                    Order
                                                    #{{ $order->order_number ?? 'ORD-' . str_pad($order->id, 6, '0', STR_PAD_LEFT) }}
                                                </h5>
                                                <p class="text-muted small mb-0">
                                                    Placed on {{ $order->created_at->format('F d, Y \a\t g:i A') }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center gap-3">
                                            <span
                                                class="badge order-status-badge status-{{ strtolower($order->order_status ?? 'processing') }}">
                                                @switch(strtolower($order->order_status ?? 'processing'))
                                                    @case('processing')
                                                        <i class="fas fa-clock me-1"></i>
                                                        Processing
                                                    @break

                                                    @case('accepted')
                                                        <i class="fas fa-clock me-1"></i>
                                                        Accepted
                                                    @break

                                                    @case('shipped')
                                                        <i class="fas fa-shipping-fast me-1"></i>
                                                        Shipped
                                                    @break

                                                    @case('delivered')
                                                        <i class="fas fa-check-circle me-1"></i>
                                                        Delivered
                                                    @break

                                                    @case('cancelled')
                                                        <i class="fas fa-times-circle me-1"></i>
                                                        Cancelled
                                                    @break

                                                    @default
                                                        <i class="fas fa-clock me-1"></i>
                                                        {{ $order->order_status ?? 'Processing' }}
                                                @endswitch
                                            </span>
                                            <button class="btn btn-link collapse-toggle p-0 text-muted"
                                                data-bs-toggle="collapse" data-bs-target="#order-{{ $order->id }}"
                                                aria-expanded="false">
                                                <i class="fas fa-chevron-down"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Order Summary -->
                                <div class="p-4 border-bottom">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <div class="d-flex align-items-center gap-2">
                                                <div>
                                                    <div class="small text-muted">Items</div>
                                                    <div class="fw-medium">{{ count($order->orderItems) }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="d-flex align-items-center gap-2">
                                                <div>
                                                    <div class="small text-muted">Payment</div>
                                                    <div class="fw-medium text-capitalize">
                                                        {{ str_replace('_', ' ', $order->payment_option ?? 'Cash on Delivery') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="d-flex align-items-center gap-2">
                                                <div>
                                                    <div class="small text-muted">Delivery</div>
                                                    <div class="fw-medium">
                                                        {{ $order->created_at->addDays(7)->format('M d') }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="d-flex align-items-center gap-2">
                                                <div>
                                                    <div class="small text-muted">Total</div>
                                                    <div class="fw-bold text-success">
                                                        {{ number_format($order->total_amount, 2) }}
                                                        @if ($config->currancy)
                                                            {{ $config->currancy }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Collapsible Order Details -->
                                <div class="collapse" id="order-{{ $order->id }}">
                                    <div class="p-4 border-bottom">
                                        <h6 class="fw-semibold text-dark mb-3 px-3">
                                            Order Items
                                        </h6>
                                        @foreach ($order->orderItems as $index => $item)
                                            <div
                                                class="order-item align-items-center gap-3 p-3 rounded-2 mb-3 {{ $index !== count($order->orderItems) - 1 ? 'border-bottom' : '' }} item-box">
                                                <div class="product-image-wrapper flex-shrink-0">
                                                    @if ($item->product->image)
                                                        <img src="{{ asset('storage/products/' . $item->product->image) }}"
                                                            class="img-fluid rounded" alt="{{ $item->product->name }}"
                                                            style="width: 60px; height: 60px; object-fit: cover;">
                                                        @else
                                                        <img src="{{ asset('/assets/img/no-product.png') }}"
                                                            alt="{{ $item->product->image }}" class="img-fluid rounded"
                                                            style="width: 60px; height: 60px; object-fit: cover;">
                                                    @endif

                                                    
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-1 fw-semibold text-dark">{{ $item->product->name }}</h6>
                                                    <div class="d-flex align-items-center gap-3 text-muted small">
                                                        <span>Qty: {{ $item->quantity }}</span>
                                                        <span>Price: {{ $item->price }} @if ($config->currancy)
                                                                {{ $config->currancy }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="text-end">
                                                    <div class="fw-bold text-success">
                                                        {{ $item->total }}
                                                        @if ($config->currancy)
                                                            {{ $config->currancy }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <!-- Shipping Information -->
                                    <div class="p-4 border-bottom bg-light">
                                        <div class="row g-4">
                                            <div class="col-md-6">
                                                <h6 class="fw-semibold text-dark mb-2">
                                                    <i class="fas fa-map-marker-alt me-2 text-success"></i>
                                                    Delivery Address
                                                </h6>
                                                <div class="text-muted small">
                                                    <div>{{ $order->customerInfo->first_name ?? 'N/A' }}
                                                        {{ $order->customerInfo->last_name ?? '' }}</div>
                                                    <div>{{ $order->customerInfo->address ?? 'N/A' }}</div>
                                                    <div>{{ $order->customerInfo->city ?? 'N/A' }},
                                                        {{ $order->customerInfo->state ?? 'N/A' }}
                                                        {{ $order->customerInfo->postal_code ?? 'N/A' }}</div>
                                                    <div>{{ $order->customerInfo->country ?? 'N/A' }}</div>
                                                    <div class="mt-1">
                                                        <i class="fas fa-phone me-1"></i>
                                                        {{ $order->customerInfo->phone ?? 'N/A' }}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6 class="fw-semibold text-dark mb-2">
                                                    <i class="fas fa-receipt me-2 text-success"></i>
                                                    Order Summary
                                                </h6>
                                                <div class="text-muted small">
                                                    <div class="d-flex justify-content-between mb-1">
                                                        <span>Subtotal:</span>
                                                        <span>{{ number_format($order->total_amount, 2) }} @if ($config->currancy)
                                                                {{ $config->currancy }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                    <div class="d-flex justify-content-between mb-1">
                                                        <span>Shipping:</span>
                                                        <span>Free</span>
                                                    </div>
                                                    <hr class="my-2">
                                                    <div class="d-flex justify-content-between fw-bold text-dark">
                                                        <span>Total:</span>
                                                        <span
                                                            class="text-success">{{ number_format($order->total_amount, 2) }}
                                                            @if ($config->currancy)
                                                                {{ $config->currancy }}
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <h4 class="mb-3 text-dark">No Orders Yet</h4>
                    <p class="text-muted mb-4">You haven't placed any orders yet. Start shopping to see your orders here.
                    </p>
                    <a href="/" class="btn btn-success">
                        <i class="fas fa-shopping-cart me-2"></i>
                        Start Shopping
                    </a>
                </div>
            @endif
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Filter functionality
            const filterTabs = document.querySelectorAll('.filter-tab');
            const orderItems = document.querySelectorAll('.order-item-wrapper');

            filterTabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();

                    // Update active tab
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    const filter = this.getAttribute('data-filter');

                    // Show/hide orders based on filter
                    orderItems.forEach(item => {
                        const status = item.getAttribute('data-status');
                        if (filter === 'all' || status === filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // Smooth collapse animation enhancement
            const collapseElements = document.querySelectorAll('.collapse');
            collapseElements.forEach(collapse => {
                collapse.addEventListener('show.bs.collapse', function() {
                    const button = document.querySelector(`[data-bs-target="#${this.id}"]`);
                    if (button) {
                        button.setAttribute('aria-expanded', 'true');
                    }
                });

                collapse.addEventListener('hide.bs.collapse', function() {
                    const button = document.querySelector(`[data-bs-target="#${this.id}"]`);
                    if (button) {
                        button.setAttribute('aria-expanded', 'false');
                    }
                });
            });
        });
    </script>
@endsection