@extends('layouts.app')

@section('title', 'Order Details')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ route('shop.orders.index') }}" class="text-gray-600 hover:text-gray-800 flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Orders
        </a>
    </div>

    <!-- Order Header -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex flex-wrap justify-between items-start gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Order #{{ $order->order_number }}</h1>
                <p class="text-gray-500">Placed on {{ $order->created_at->format('F j, Y') }}</p>
            </div>
            
            <span class="px-4 py-2 rounded-full text-sm font-medium
                @switch($order->status)
                    @case('delivered') bg-green-100 text-green-700 @break
                    @case('shipped') bg-blue-100 text-blue-700 @break
                    @case('processing') bg-yellow-100 text-yellow-700 @break
                    @case('cancelled') bg-red-100 text-red-700 @break
                    @default bg-gray-100 text-gray-700
                @endswitch">
                {{ ucfirst($order->status) }}
            </span>
        </div>

        <hr class="my-4">

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <p class="text-sm text-gray-500">Order Date</p>
                <p class="font-medium">{{ $order->created_at->format('M d, Y') }}</p>
            </div>
            
            <div>
                <p class="text-sm text-gray-500">Total</p>
                <p class="font-bold text-red-600">{{ format_currency($order->total) }}</p>
            </div>
            
            <div>
                <p class="text-sm text-gray-500">Payment Method</p>
                <p class="font-medium">{{ ucfirst($order->payment_method) }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Order Items -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h2 class="font-bold text-gray-800 mb-4">Order Items</h2>

                @foreach($order->items as $item)
                <div class="flex gap-4 mb-4 pb-4 border-b last:border-0">
                    <img src="{{ $item->product->thumbnail_url }}" alt="" class="w-24 h-24 object-cover rounded-lg">
                    
                    <div class="flex-1">
                        <a href="{{ route('shop.product', $item->product->slug) }}" class="font-medium hover:text-red-600">
                            {{ $item->product_name }}
                        </a>
                        
                        <p class="text-sm text-gray-500">Qty: {{ $item->quantity }}</p>
                        
                        <p class="font-medium">{{ format_currency($item->price) }}</p>

                        @if($order->status === 'delivered' && !$item->product->reviews()
                            ->where('user_id', auth()->id())
                            ->where('order_id', $order->id)
                            ->first())
                        <a href="#review-{{ $item->product->id }}" class="text-sm text-green-600 hover:underline mt-2 inline-block">
                            Write a Review
                        </a>
                        @endif
                    </div>
                </div>
                @endforeach

                <hr class="my-4">

                <div class="space-y-2">
                    <div class="flex justify-between"><span class="text-gray-600">Subtotal</span><span>{{ format_currency($order->subtotal) }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-600">Shipping</span><span>{{ format_currency($order->shipping_cost) }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-600">Tax</span><span>{{ format_currency($order->tax) }}</span></div>
                    @if($order->discount > 0)
                    <div class="flex justify-between text-green-600"><span>Discount</span><span>-{{ format_currency($order->discount) }}</span></div>
                    @endif
                    <div class="flex justify-between font-bold text-lg pt-2 border-t">
                        <span>Total</span>
                        <span class="text-red-600">{{ format_currency($order->total) }}</span>
                    </div>
                </div>
            </div>

            <!-- Review Section -->
            @if($order->canBeReviewed())
            <div id="review" class="bg-white rounded-xl shadow-sm p-6 mt-6">
                <h2 class="font-bold text-gray-800 mb-4">Write a Review</h2>

                <form action="{{ route('reviews.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="order_id" value="{{ $order->id }}">

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Select Product *</label>
                        <select name="product_id" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            <option value="">Choose a product to review</option>
                            @foreach($order->items as $item)
                                @if(!$item->product->reviews()
                                    ->where('user_id', auth()->id())
                                    ->where('order_id', $order->id)
                                    ->first())
                                <option value="{{ $item->product->id }}">{{ $item->product_name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Rating *</label>
                        <div class="flex gap-2">
                            @for($i = 1; $i <= 5; $i++)
                            <label class="cursor-pointer">
                                <input type="radio" name="rating" value="{{ $i }}" class="peer sr-only" {{ $i === 5 ? 'checked' : '' }}>
                                <span class="text-2xl text-gray-300 peer-checked:text-yellow-400 hover:text-yellow-300">★</span>
                            </label>
                            @endfor
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Review Title</label>
                        <input type="text" name="title" class="w-full border border-gray-300 rounded-lg px-3 py-2" 
                            placeholder="Summarize your experience">
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Your Review *</label>
                        <textarea name="body" rows="4" required 
                            class="w-full border border-gray-300 rounded-lg px-3 py-2"
                            placeholder="Share your experience with this product..."></textarea>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Add Photos (Optional, max 5)</label>
                        <input type="file" name="images[]" multiple accept="image/*" max="5"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2">
                        <p class="text-xs text-gray-500 mt-1">You can upload up to 5 images</p>
                    </div>

                    <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700">
                        Submit Review
                    </button>
                </form>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Shipping Address -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-bold text-gray-800 mb-3">Shipping Address</h3>
                <p class="font-medium">{{ $order->shipping_name }}</p>
                <p class="text-gray-600">{{ $order->shipping_address }}</p>
                <p class="text-gray-600">{{ $order->shipping_city }}, {{ $order->shipping_state }} {{ $order->shipping_zip }}</p>
                <p class="text-gray-600">{{ $order->shipping_country }}</p>
                <p class="text-gray-600 mt-2">📞 {{ $order->shipping_phone }}</p>
            </div>

            <!-- Tracking -->
            @if($order->shipmentTracking)
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-bold text-gray-800 mb-3">Tracking Information</h3>
                
                <p class="text-sm text-gray-500">Carrier</p>
                <p class="font-medium">{{ $order->shipmentTracking->carrier }}</p>
                
                <p class="text-sm text-gray-500 mt-2">Tracking Number</p>
                <p class="font-medium">{{ $order->shipmentTracking->tracking_number }}</p>
                
                <a href="{{ route('shop.orders.track', $order->order_number) }}" 
                   class="mt-3 inline-block bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700">
                    Track Order
                </a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection
