@extends('layouts.vendor')

@section('title', 'COD Order Details')
@section('page-title', 'COD Order: ' . $order->order_number)

@section('content')
<div class="max-w-4xl space-y-6">
    {{-- Payment Status Banner --}}
    <div class="rounded-xl p-6 {{ $order->payment_status === 'paid' ? 'bg-green-50 border border-green-200' : 'bg-orange-50 border border-orange-200' }}">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="font-bold {{ $order->payment_status === 'paid' ? 'text-green-800' : 'text-orange-800' }}">
                    Payment Status: {{ ucfirst($order->payment_status) }}
                </h3>
                @if($order->payment_status === 'paid' && $order->paid_at)
                    <p class="text-sm {{ $order->payment_status === 'paid' ? 'text-green-600' : 'text-orange-600' }}">
                        Paid on {{ \Carbon\Carbon::parse($order->paid_at)->format('F d, Y \a\t h:i A') }}
                    </p>
                @else
                    <p class="text-sm {{ $order->payment_status === 'paid' ? 'text-green-600' : 'text-orange-600' }}">
                        Awaiting cash payment from customer
                    </p>
                @endif
            </div>
            
            @if($order->payment_status === 'pending')
            <form action="{{ route('vendor.cod.mark-paid', $order) }}" method="POST" data-no-loading="true"
                  onsubmit="if(confirm('Mark this COD order as paid? Your earnings of {{ format_currency($vendorEarnings) }} will be credited.')) { showLoading(); return true; } else { return false; }">
                @csrf
                <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 font-medium">
                    ✓ Mark as Paid
                </button>
            </form>
            @endif
        </div>
    </div>

    {{-- Your Earnings Summary --}}
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Your Earnings Summary</h3>
        <div class="grid grid-cols-3 gap-4">
            <div class="text-center p-4 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Items Sold</p>
                <p class="text-2xl font-bold">{{ $vendorItems->count() }}</p>
            </div>
            <div class="text-center p-4 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-500">Subtotal</p>
                <p class="text-2xl font-bold">{{ format_currency($vendorSubtotal) }}</p>
            </div>
            <div class="text-center p-4 bg-green-50 rounded-lg">
                <p class="text-sm text-gray-500">Your Earnings</p>
                <p class="text-2xl font-bold text-green-600">{{ format_currency($vendorEarnings) }}</p>
            </div>
        </div>
    </div>

    {{-- Order Info --}}
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Order Information</h3>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <p class="text-gray-500">Order Number</p>
                <p class="font-medium">{{ $order->order_number }}</p>
            </div>
            <div>
                <p class="text-gray-500">Order Date</p>
                <p class="font-medium">{{ $order->created_at->format('F d, Y h:i A') }}</p>
            </div>
            <div>
                <p class="text-gray-500">Order Status</p>
                <p class="font-medium">{{ ucfirst($order->status) }}</p>
            </div>
            <div>
                <p class="text-gray-500">Payment Method</p>
                <p class="font-medium">Cash on Delivery</p>
            </div>
        </div>
    </div>

    {{-- Customer Info --}}
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Customer Information</h3>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <p class="text-gray-500">Name</p>
                <p class="font-medium">{{ $order->shipping_name }}</p>
            </div>
            <div>
                <p class="text-gray-500">Email</p>
                <p class="font-medium">{{ $order->shipping_email }}</p>
            </div>
            <div>
                <p class="text-gray-500">Phone</p>
                <p class="font-medium">{{ $order->shipping_phone ?? 'N/A' }}</p>
            </div>
            <div class="col-span-2">
                <p class="text-gray-500">Shipping Address</p>
                <p class="font-medium">{{ $order->shipping_address }}, {{ $order->shipping_city }}, {{ $order->shipping_state }} {{ $order->shipping_zip }}, {{ $order->shipping_country }}</p>
            </div>
        </div>
    </div>

    {{-- Your Items in This Order --}}
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-bold text-gray-800 mb-4">Your Items in This Order</h3>
        
        <div class="space-y-3">
            @foreach($vendorItems as $item)
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center gap-3">
                    <img src="{{ $item->product->thumbnail_url ?? asset('images/default-product.png') }}" class="w-12 h-12 object-cover rounded-lg">
                    <div>
                        <p class="font-medium text-sm">{{ $item->product_name }}</p>
                        <p class="text-xs text-gray-500">SKU: {{ $item->product_sku }}</p>
                        <p class="text-xs text-gray-500">Qty: {{ $item->quantity }} × {{ format_currency($item->price) }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-medium">{{ format_currency($item->subtotal) }}</p>
                    <p class="text-xs text-gray-500">Commission: {{ $item->commission_rate }}%</p>
                    <p class="text-xs text-green-600 font-medium">You earn: {{ format_currency($item->vendor_earnings) }}</p>
                </div>
            </div>
            @endforeach
        </div>

        <div class="border-t mt-4 pt-4">
            <div class="flex justify-between items-center">
                <span class="font-medium">Total Earnings</span>
                <span class="text-xl font-bold text-green-600">{{ format_currency($vendorEarnings) }}</span>
            </div>
        </div>
    </div>

    <div class="flex gap-4">
        <a href="{{ route('vendor.cod.index') }}" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300">← Back to COD Orders</a>
    </div>
</div>
@endsection
