@extends('admin.layout')

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

@section('content')
<div class="space-y-6">
    <!-- Order Info -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Order #{{ $order->order_number }}</h1>
                    <p class="text-sm text-gray-500 mt-1">Customer: {{ $order->customer->name }}</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.orders.receipt', $order) }}" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                        Print Receipt
                    </a>
                    @if($order->status !== 'completed')
                        <a href="{{ route('admin.orders.edit', $order) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                            Edit
                        </a>
                    @endif
                    <a href="{{ route('admin.orders.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium">
                        Back
                    </a>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-2">Status</h3>
                    <form action="{{ route('admin.orders.update', $order) }}" method="POST" class="inline">
                        @csrf
                        @method('PUT')
                        <select name="status" onchange="this.form.submit()" 
                                class="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                            <option value="ready" {{ $order->status == 'ready' ? 'selected' : '' }}>Ready</option>
                            <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </form>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-500 mb-2">Payment Status</h3>
                    <span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full 
                        {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-800' : 
                           ($order->payment_status === 'partial' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                        {{ ucfirst($order->payment_status) }}
                    </span>
                </div>
            </div>

            <!-- Order Items -->
            <div class="mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Order Items</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cloth Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unit Price</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($order->orderItems as $item)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->clothType->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->serviceType->name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->quantity }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${{ number_format($item->unit_price, 2) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${{ number_format($item->subtotal, 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-gray-50">
                            <tr>
                                <td colspan="4" class="px-6 py-4 text-right text-sm font-medium text-gray-900">Total:</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">${{ number_format($order->total_amount, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Payment Summary -->
            <div class="border-t pt-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Payment Summary</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">Total Amount</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">${{ number_format($order->total_amount, 2) }}</p>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">Paid Amount</p>
                        <p class="text-2xl font-bold text-green-600 mt-1">${{ number_format($order->paid_amount, 2) }}</p>
                    </div>
                    <div class="bg-{{ $order->isOverpaid() ? 'blue' : ($order->isUnderpaid() ? 'red' : 'gray') }}-50 p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">
                            @if($order->isOverpaid())
                                Overpayment
                            @elseif($order->isUnderpaid())
                                Outstanding Balance
                            @else
                                Balance
                            @endif
                        </p>
                        <p class="text-2xl font-bold {{ $order->isOverpaid() ? 'text-blue-600' : ($order->isUnderpaid() ? 'text-red-600' : 'text-gray-900') }} mt-1">
                            @if($order->isOverpaid())
                                ${{ number_format($order->overpayment, 2) }}
                            @elseif($order->isUnderpaid())
                                ${{ number_format($order->underpayment, 2) }}
                            @else
                                $0.00
                            @endif
                        </p>
                    </div>
                </div>
                
                @if($order->payments->count() > 0)
                <div>
                    <h4 class="text-sm font-medium text-gray-700 mb-2">Payment History</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Discount</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Applied</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Processed By</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($order->payments as $payment)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $payment->created_at->format('M d, Y H:i') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${{ number_format($payment->amount, 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
                                        @if($payment->discount > 0)
                                            -${{ number_format($payment->discount, 2) }}
                                        @else
                                            $0.00
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">${{ number_format($payment->amount - ($payment->discount ?? 0), 2) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ ucfirst($payment->payment_method) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $payment->user->name ?? 'N/A' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 p-3 bg-blue-50 rounded-lg">
                        <p class="text-sm text-gray-700">
                            <strong>Note:</strong> To add payments, please use the <a href="{{ route('admin.payments.create', ['order_id' => $order->id]) }}" class="text-blue-600 hover:text-blue-800 underline font-medium">Receive Payment</a> page.
                        </p>
                    </div>
                </div>
                @else
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <p class="text-sm text-gray-600 mb-2">No payments recorded yet.</p>
                    <p class="text-sm text-gray-500">
                        To add payments, please use the <a href="{{ route('admin.payments.create', ['order_id' => $order->id]) }}" class="text-blue-600 hover:text-blue-800 underline font-medium">Receive Payment</a> page.
                    </p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection