@extends('admin.layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">Order #{{ $order->id }}</h1>
        <div class="flex space-x-4">
            <a href="{{ route('admin.orders.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Back to Orders
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Order Information -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Order Information</h2>
            <div class="space-y-4">
                <div>
                    <p class="text-sm text-gray-500">Order Number</p>
                    <p class="font-medium">{{ $order->order_number }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Status</p>
                    <div class="flex items-center gap-2">
                        <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full 
                            @if($order->status === \App\Enums\OrderStatus::COMPLETED) bg-green-100 text-green-800
                            @elseif($order->status === \App\Enums\OrderStatus::PROCESSING) bg-blue-100 text-blue-800
                            @elseif($order->status === \App\Enums\OrderStatus::CANCELLED) bg-red-100 text-red-800
                            @else bg-yellow-100 text-yellow-800
                            @endif">
                            {{ $order->status->label() }}
                        </span>
                        <select id="orderStatus" onchange="updateOrderStatus(this.value)" class="ml-2 px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white hover:bg-gray-50 transition-colors duration-200">
                            <option value="{{ \App\Enums\OrderStatus::PENDING->value }}" {{ $order->status === \App\Enums\OrderStatus::PENDING ? 'selected' : '' }}>Pending</option>
                            <option value="{{ \App\Enums\OrderStatus::PROCESSING->value }}" {{ $order->status === \App\Enums\OrderStatus::PROCESSING ? 'selected' : '' }}>Processing</option>
                            <option value="{{ \App\Enums\OrderStatus::COMPLETED->value }}" {{ $order->status === \App\Enums\OrderStatus::COMPLETED ? 'selected' : '' }}>Completed</option>
                            <option value="{{ \App\Enums\OrderStatus::CANCELLED->value }}" {{ $order->status === \App\Enums\OrderStatus::CANCELLED ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Payment Status</p>
                    <div class="flex items-center gap-2">
                        <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full 
                            @if($order->payment_status === 'paid') bg-green-100 text-green-800
                            @elseif($order->payment_status === 'pending') bg-yellow-100 text-yellow-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                        <select id="paymentStatus" onchange="updatePaymentStatus(this.value)" class="ml-2 px-3 py-1.5 text-sm border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white hover:bg-gray-50 transition-colors duration-200">
                            <option value="pending" {{ $order->payment_status === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="paid" {{ $order->payment_status === 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="failed" {{ $order->payment_status === 'failed' ? 'selected' : '' }}>Failed</option>
                        </select>
                    </div>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Payment Method</p>
                    <p class="font-medium">{{ ucfirst($order->payment_method) }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Order Date</p>
                    <p class="font-medium">{{ $order->created_at->format('M d, Y H:i') }}</p>
                </div>
            </div>
        </div>

        <!-- Customer Information -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Customer Information</h2>
            <div class="space-y-4">
                <div>
                    <p class="text-sm text-gray-500">Name</p>
                    <p class="font-medium">{{ $order->shipping_name }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Email</p>
                    <p class="font-medium">{{ $order->shipping_email }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Phone</p>
                    <p class="font-medium">{{ $order->shipping_phone }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">Shipping Address</p>
                    <p class="font-medium">{{ $order->shipping_address }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Items -->
    <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
        <div class="p-6">
            <h2 class="text-lg font-semibold mb-4">Order Items</h2>
            <table class="min-w-full divide-y divide-gray-200">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variation</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($order->items as $item)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $item->product->name_en }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                                {{ $item->variation->color_en }} / {{ $item->variation->size_en }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">${{ number_format($item->price, 2) }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">{{ $item->quantity }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">${{ number_format($item->total, 2) }}</div>
                        </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">Subtotal</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${{ number_format($order->subtotal, 2) }}</td>
                    </tr>
                    @if($order->discount > 0)
                    <tr>
                        <td colspan="4" class="px-6 py-4 text-right text-sm font-medium text-gray-900">Discount</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">-${{ number_format($order->discount, 2) }}</td>
                    </tr>
                    @endif
                    <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-medium text-gray-900">${{ number_format($order->total, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    @if($order->notes)
    <!-- Order Notes -->
    <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold mb-4">Order Notes</h2>
        <p class="text-gray-700">{{ $order->notes }}</p>
    </div>
    @endif

    <div class="mt-4">
        <a href="{{ route('admin.orders.packaging-slip', $order) }}" class="text-indigo-600 hover:text-indigo-900">View Packaging Slip</a>
    </div>
</div>

@push('scripts')
<script>
function updateOrderStatus(status) {
    fetch(`/admin/orders/{{ $order->id }}/status`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ status })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            // Reload the page to show updated status
            window.location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update order status');
    });
}

function updatePaymentStatus(status) {
    fetch(`/admin/orders/{{ $order->id }}/payment-status`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ payment_status: status })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            // Reload the page to show updated status
            window.location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update payment status');
    });
}
</script>
@endpush
@endsection