<div class="space-y-4">
    <p class="text-gray-600">You can modify your delivery address and notes while your order is still pending confirmation.</p>
    
    <div class="grid grid-cols-1 gap-4">
        <!-- Customer Name (Read-only) -->
        <div>
            <label for="customer_name_display" class="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
            <input type="text" 
                   id="customer_name_display" 
                   value="{{ $order->customer_name }}" 
                   readonly
                   class="w-full rounded-md border-gray-300 bg-gray-50 text-gray-600 shadow-sm cursor-not-allowed">
            <p class="text-xs text-gray-500 mt-1">Customer name cannot be changed after order placement</p>
        </div>

        <!-- Customer Phone (Read-only) -->
        <div>
            <label for="customer_phone_display" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
            <input type="text" 
                   id="customer_phone_display" 
                   value="{{ $order->customer_phone }}" 
                   readonly
                   class="w-full rounded-md border-gray-300 bg-gray-50 text-gray-600 shadow-sm cursor-not-allowed">
            <p class="text-xs text-gray-500 mt-1">Phone number cannot be changed after order placement</p>
        </div>

        <!-- Delivery Address -->
        <div>
            <label for="customer_address" class="block text-sm font-medium text-gray-700 mb-1">Delivery Address</label>
            <textarea name="customer_address" 
                      id="customer_address" 
                      rows="3" 
                      required
                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ $order->customer_address }}</textarea>
        </div>

        <!-- Notes -->
        <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Order Notes (Optional)</label>
            <textarea name="notes" 
                      id="notes" 
                      rows="2" 
                      placeholder="Any special instructions or requests..."
                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ $order->notes }}</textarea>
        </div>
    </div>

    <!-- Order Items (Read-only) -->
    <div class="border-t border-gray-200 pt-4">
        <h5 class="font-medium text-gray-900 mb-2">Order Items (Cannot be changed)</h5>
        <div class="bg-gray-50 rounded-lg p-3 space-y-2">
            @foreach($order->orderItems as $item)
                <div class="flex justify-between items-center text-sm">
                    <span class="text-gray-700">{{ $item->product->name }} ({{ $item->quantity }}x)</span>
                    <span class="font-medium">৳{{ number_format($item->quantity * $item->price, 2) }}</span>
                </div>
            @endforeach
            <div class="border-t border-gray-300 pt-2 flex justify-between font-semibold">
                <span>Total:</span>
                <span>৳{{ number_format($order->total_amount, 2) }}</span>
            </div>
        </div>
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mt-2">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-yellow-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                <p class="text-sm text-yellow-800 font-medium">
                    To change items, please cancel this order and create a new one.
                </p>
            </div>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
        <button type="button" 
                onclick="closeModal('editOrderModal')" 
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
            Cancel
        </button>
        <button type="button" 
                onclick="submitEditOrder()" 
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
            Save Changes
        </button>
    </div>
</div>